<template>
  <div :class="{ tabs: true, 'tabs-bottom': isHasBottomBorder }">
    <div v-for="(item, index) in tabsList" @click="updown(item.value, index)">
      <span :class="item.value == activity ? 'tabs-activity' : ''">{{
        item.value
      }}</span>
    </div>
    <!-- <div><span>商城</span></div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      activity: "",
    };
  },
  props: ["tabsList", "isHasBottomBorder"],
  mounted() {
    this.activity = this.tabsList[0].value;
  },
  methods: {
    updown(value, index) {
      this.activity = value;
      this.$emit("getIndex", index);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
.tabs {
  display: flex;
  position: relative;
  div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 0.5rem 0;
    span {
      @include sc(0.65rem, #000);
    }
    .tabs-activity {
      color: $blue;
      position: relative;
    }
    .tabs-activity::after {
      content: "";
      width: 100%;
      height: 0.08rem;
      background-color: $blue;
      position: absolute;
      top: 100%;
      left: 0;
      transform: translateY(0.2rem);
    }
  }
}
.tabs-bottom:after {
  position: absolute;
  top: 100%;
  content: "";
  display: block;
  @include wh(100%, 1px);
  background: #999;
  transform: scaleY(0.1);
}
</style>